<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.5/dayjs.min.js"></script>
    <script src="../js/vue-2.6.12开发.js"></script>
</head>

<body>
    <!-- 
        过滤器:
          定义:对要显示的数据进行特定的格式化后在显示 (适用于一些简单的逻辑处理)
          语法:
              1.全局注册:Vue.filter('name',callback) 或 局部注册: new Vue({filters:{}})
              2.使用过滤器:{{xxx | 过滤器名}} 或 v-bind:属性='xxx' | 过滤器名。(v-model不可使用)
          备注: 
              1.过滤器也可以接收额外参数(默认接收管道符前面的属性值) 多个过滤器可以串联 (类似next中间件特性)
              2.并没有改变原来的数据 是产生新的对应的数据 (不改变data中的原数据)
     -->
    <div id="root">
        <h1>{{fmtTime}}</h1>
        <h1>{{ getFmtTime()}}</h1>
        <h1>{{ time|fmtFilter}}</h1>
        <h1>{{ time|fmtFilter('YYYY_MM_DD') | getSplice}}</h1>
    </div>
    <script>
        // 全局注册一个过滤器 Vue.filter('函数名',function(value){})

        Vue.filter('getSplice', function (value) {
            return value.slice(0, 4)
        })
        new Vue({
            el: '#root',
            data: {
                time: 1660876491926
            },

            computed: {
                fmtTime() {
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            methods: {
                getFmtTime() {
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            // 局部过滤器
            filters: {
                fmtFilter(value, str = 'YYYY-MM-DD HH:mm:ss') {
                    return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
                },
                //   过滤器的特点可以多个函数逐级过滤 类似next的特性 也可全局注册 
                // getSplice(value) {//此处value是fmtFilter处理后的返回值 
                //     return value.slice(0, 4)
                // }
            }


        })
    </script>
</body>

</html>